<template>
  <div class="input">
      <div class="concen">
        <input type="number" placeholder="请输入学号" v-model="uresId"/>
        <hr />
        <slot name="compellation"></slot>
        <input type="password" placeholder="请输入密码" v-model="password"/>
        <hr />
        <button @click="endData">{{text}}</button>
      </div>
  </div>
</template>

<script>
export default {
    name:'inputL',
    props:['text'],
    data(){
        return {
            uresId:'',
            password:''
        }
    },
    methods:{
        //发送数据功能
        endData(){
            this.$emit('login',Number.parseInt(this.uresId),this.password)
        }
    }
}
</script>

<style lang="less" scoped>
.input {
  width: 80%;
  background: #ffff;
  border-radius: 5%;
  .concen {
    width: 80%;
    margin: 2rem auto;
    input {
      width: 100%;
      margin: 0.5rem 0;
      font-size: 1.2rem;
      padding: 0.5rem 0;
      border: none;
    }
    input:focus {
      outline: 1px solid #5706a4;
      outline-offset: 4px;
      outline-style: auto;
    }
    button{
      width: 100%;
      padding: 0.5rem 0;

    }
    hr {
      border: 1px #ededed solid;
    }
  }
}
</style>